<!-- 组织-组织机构管理-工作地点 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title" :breadCrumb="breadCrumb" subtitle>
        <template #subtitle>
          <a-tooltip
            content="工作地点是组织的地理位置，一般用于员工在劳动合同签订约定的工作所在地。"
          >
            <icon-info-circle-fill style="color: #165dff; font-size: 16px" />
          </a-tooltip>
        </template>
      </PageHeaderNew>
    </template>

    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-space direction="vertical">
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="请输入工作地点名称"
            search-button
            v-model="nameSearch"
            @search="onSearch"
            @press-enter="onSearch"
          >
            <template #button-icon>
              <icon-search />
            </template>
          </a-input-search>
        </a-space>
      </template>
      <template #right>
        <a-button type="primary" @click="goModal(1)">新增工作地点</a-button>
        <a-button type="outline" @click="del(null)" status="danger"
          >批量删除</a-button
        >
      </template>
    </ConditionBox>
    <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
      <a-table-column :width="80" align="center">
        <template #title>
          <span>序号</span>
        </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        dataIndex="name"
        title="工作地点名称"
      >
        <template #cell="{ record }">
          <a @click="goModal(3, record)"> {{ record.name }}</a>
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="cityCode" title="城市">
        <template #cell="{ record }">
          {{
            cityData.find((item) => item.code === record.cityCode.slice(0, 2))
              ?.name +
            cityData.find((item) => item.code === record.cityCode)?.name
          }}
        </template>
      </a-table-column>
      <a-table-column
        :width="300"
        dataIndex="address"
        title="详细地址"
      ></a-table-column>
      <a-table-column
        :width="200"
        dataIndex="code"
        title="邮政编码"
      ></a-table-column>
      <a-table-column :width="200" dataIndex="typeId" title="类型">
        <template #cell="{ record }">
          {{
            workTypeList?.find((item: any) => item.id === record.typeId)?.name
          }}
        </template>
      </a-table-column>
      <a-table-column
        :width="200"
        dataIndex="remark"
        title="描述"
      ></a-table-column>
      <a-table-column :width="100" fixed="right">
        <template #title>
          <a-tooltip content="是否显示排序">
            <icon-font
              type="icon-filter-def"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer'
              }"
              @click="isFilter"
            />
          </a-tooltip>
          <a-tooltip content="表头设置">
            <icon-font
              type="icon-setting-def"
              :size="26"
              :style="{
                cursor: 'pointer'
              }"
              @click="isSetting"
            />
          </a-tooltip>
        </template>
        <template #cell="{ record }">
          <a-space :size="0">
            <a-tooltip content="详情">
              <icon-font
                type="icon-details-def"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="goModal(3, record)"
              />
            </a-tooltip>
            <a-tooltip content="编辑">
              <icon-font
                type="icon-edit"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="goModal(2, record)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record.id)"
              >
                <icon-font
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
  <addWorkPlace
    v-model:visible="modalVisible"
    @workpalceAddEmit="workpalceAddEmit"
    :type="currType"
    :list="currList"
  >
  </addWorkPlace>
</template>

<script lang="ts" setup>
import citiesJson from '@/assets/json/pc-code.json';
import { flattenArrayWithChildren } from '@/utils/utils';
import {
  GetWorkPlaceList,
  PostWorkPlaceList,
  DelWorkPlaceList,
  PutWorkPlaceList
} from '@/apis/management/organization/organizationManagement';
import { GetWorkTypeList } from '@/apis/management/organization/baseSetting';
import addWorkPlace from './Components/AddWorkPlace/index.vue';
import { Modal, Message } from '@arco-design/web-vue';

const title = '工作地点';

const breadCrumb: string[] = ['组织', '基础设置', '工作地点'];

const router = useRouter();

let nameSearch = ref(''); //名称搜索框

let tableRef = ref(); // 储存table的ref
let modalVisible = ref(false); // 判断表格方法是否弹出框
/*
 判断弹出哪种弹出框
      1 移动组织
      2 合并
      3 启用
      4 停用
      5 删除
    */
let type = ref(0);

/* 储存选择的数据 */
const selectedList = computed(() => tableRef.value.selectedList);

// 选择器配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
});

let workTypeList = ref();
let cityData = flattenArrayWithChildren(citiesJson); // 储存扁平化后的数据

const getData = async () => {
  try {
    // 获取工作类型数据
    const res: any = await GetWorkTypeList({
      pageNumber: 0,
      pageSize: -1,
      type: 2
    });
    workTypeList.value = res.content;
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 获取表格数据
const getTableData = async (pageData: any) => {
  try {
    const res = await GetWorkPlaceList({
      ...pageData,
      name: nameSearch.value
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 搜索框
const onSearch = () => {
  refresh({
    pageNumber: 0,
    pageSize: -1
  });
};

let currType = ref(0); // 判断是新增、编辑还是详情
let currList = ref<any>({}); // 储存某一行数据
// 新增,详情、编辑工作地点按钮
const goModal = (type: number, record?: any) => {
  currList.value = record;
  currType.value = type;
  modalVisible.value = true;
};

// 工作地点新增编辑返回的自定义事件
const workpalceAddEmit = async (formData: any) => {
  try {
    console.log(formData);
    // 编辑
    if (formData.id) await PutWorkPlaceList(formData);
    // 新增
    else await PostWorkPlaceList(formData);
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 删除
const del = async (id: number | null) => {
  try {
    if (!id) {
      if (selectedList.value.length === 0) {
        Message.error('请至少选择一项！');
      } else {
        Modal.confirm({
          title: '提示',
          content: '确定要删除选中的数据吗？',
          onOk: async () => {
            try {
              await DelWorkPlaceList({
                ids: selectedList.value
              });
              tableRef.value.selectedList = [];
              refresh();
            } catch (error: unknown) {
              console.log(error);
            }
          }
        });
      }
    } else {
      await DelWorkPlaceList({
        ids: [id]
      });
      tableRef.value.selectedList = [];
      refresh();
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

// 刷新表格
const refresh = (pageData?: any) => {
  if (pageData) tableRef.value.loadData(pageData);
  else tableRef.value.loadData();
};
</script>

<style lang="less" scoped>
.container {
  padding: 10px 20px;
  .header {
    .commonBtns {
      background-color: rgb(var(--primary-1));
    }
  }
  .main {
    margin-top: 20px;
  }
}
</style>
